<template>
  <div>
    <div if="XHSFleet" v-if="fleetPower">
      <i-button type="primary" style="margin-bottom:5px;" @click="addDriverXHSFleet">新增司机</i-button>
      <tablePage ref="containerTab" :staticData="driverList" :isStartLoad="false" :mode="1"
                 @pageChangeIndex="pageChangeIndex">
        <template slot-scope="props">
          <Table :columns="columns7" border :data="props.data" @on-sort-change="props.sortChange"></Table>
        </template>
      </tablePage>
      <Modal
        :visible.sync="modal1XHSEdit"
        v-model="modal1XHSEdit"
        title="司机信息编辑"
        @on-ok="okXHS"
        class-name="vertical-center-modal">
        <Form ref="tableDataDetailXHS" :model="tableDataDetailXHS" :rules="tableDataDetailXHS">
          <FormItem prop="fleetId" label="车队">
            <Select v-model="tableDataDetailXHS.fleetid">
              <Option v-for="item in fleetList" :value="item.id" :key='item.id'>{{item.login_name}}</Option>
            </Select>
          </FormItem>
          <FormItem label="车牌号">
            <Select v-model="tableDataDetailXHS.truckid">
              <Option v-for="add in truckNoList" :value="add.id" :key="add.truckNo">{{add.truckNo}}--{{add.fleetName}}
              </Option>
            </Select>
          </FormItem>
          <FormItem prop="loginName" label="用户名">
            <i-input type="text" v-model="tableDataDetailXHS.loginname" placeholder="username">
              <Icon type="ios-person-outline" slot="prepend"></Icon>
            </i-input>
          </FormItem>
          <FormItem prop="pwd" label="密码">
            <i-input type="password" v-model="tableDataDetailXHS.pwd" placeholder="Password">
              <Icon type="ios-locked-outline" slot="prepend"></Icon>
            </i-input>
          </FormItem>
          <FormItem prop="mobile" label="电话">
            <i-input type="text" v-model="tableDataDetailXHS.mobile" placeholder="mobile">
              <Icon type="android-phone-portrait" slot="prepend"></Icon>
            </i-input>
          </FormItem>
          <FormItem prop="mail" label="邮箱">
            <i-input type="text" v-model="tableDataDetailXHS.email" placeholder="email">
              <Icon type="ios-at" slot="prepend"></Icon>
            </i-input>
          </FormItem>
          <FormItem prop="realName" label="真实姓名">
            <i-input type="text" v-model="tableDataDetailXHS.realname" placeholder="realName">
              <Icon type="ios-person-outline" slot="prepend"></Icon>
            </i-input>
          </FormItem>

          <FormItem style="float:right;margin-top:-3%;">
            <Button type="info" @click="editDriverXHS(tableDataDetailXHS)">确认修改</Button>
            <Button type="primary" @click="modal1 = false">取消</Button>
          </FormItem>
        </Form>
        <div slot="footer">
        </div>
      </Modal>
      <Modal
        v-model="modalXHSFleet"
        title="添加司机">
        <Form ref="ruleForm1" :model="ruleForm" :rules="ruleFormValidate">
          <FormItem prop="fleetId" label="车队">
            <Select v-model="ruleForm.fleetId">
              <Option v-for="item in fleetList" :value="item.id" :key='item.id'>{{item.login_name}}</Option>
            </Select>
          </FormItem>
          <FormItem prop="truckId" label="车牌号">
            <Select v-model="ruleForm.truckId">
              <Option v-for="add in truckNoList" :value="add.id" :key="add.truckNo">{{add.truckNo}}--{{add.fleetName}}
              </Option>
            </Select>
          </FormItem>
          <FormItem prop="loginName" label="用户名">
            <i-input type="text" v-model="ruleForm.loginName" placeholder="username">
              <Icon type="ios-person-outline" slot="prepend"></Icon>
            </i-input>
          </FormItem>
          <FormItem prop="pwd" label="密码">
            <i-input type="password" v-model="ruleForm.pwd" placeholder="Password">
              <Icon type="ios-locked-outline" slot="prepend"></Icon>
            </i-input>
          </FormItem>
          <FormItem prop="mobile" label="电话">
            <i-input type="text" v-model="ruleForm.mobile" placeholder="mobile">
              <Icon type="android-phone-portrait" slot="prepend"></Icon>
            </i-input>
          </FormItem>
          <FormItem prop="email" label="邮箱">
            <i-input type="text" v-model="ruleForm.email" placeholder="email">
              <Icon type="ios-at" slot="prepend"></Icon>
            </i-input>
          </FormItem>
          <FormItem prop="realName" label="真实姓名">
            <i-input type="text" v-model="ruleForm.realName" placeholder="realName">
              <Icon type="ios-person-outline" slot="prepend"></Icon>
            </i-input>
          </FormItem>

          <FormItem style="float:right;margin-top:-3%;">
            <Button type="info" @click="handleSubmitXHS(ruleForm)">立即增加</Button>
            <Button type="primary" @click="modalXHSFleet = false">取消</Button>
          </FormItem>
        </Form>
        <div slot="footer">
        </div>
      </Modal>
    </div>
    <div id="otherFleet" v-if="!fleetPower">
      <i-button type="primary" style="margin-bottom:5px;" @click="addDriver">新增司机</i-button>
      <!-- 司机列表 2018/3/7 11:16 zhangQ -->
      <!--<tablePage ref="containerTab" :staticData="driverList" :isStartLoad="false" :mode="1">
        <template slot-scope="props">
          <Table :columns="columns7" border :data="props.data" @on-sort-change="props.sortChange"></Table>
        </template>
      </tablePage>-->
      <tablePage ref="containerTab" :api="getDriverListByPage" :param="tabParam" @pageChangeIndex="pageChangeIndex">
        <template slot-scope="props">
          <Table :columns="columns7" :data="props.data"></Table>
        </template>
      </tablePage>
      <Modal
        :visible.sync="modal1"
        v-model="modal1"
        title="司机信息编辑"
        @on-ok="ok"
        class-name="vertical-center-modal">
        <Form ref="tableDataDetail" :model="tableDataDetail" :rules="tableDataDetail">
          <FormItem label="车牌号">
            <Select v-model="tableDataDetail.truckId">
              <Option v-for="add in truckNoList" :value="add.id" :key="add.truck_no">{{add.truck_no}}</Option>
            </Select>
          </FormItem>
          <FormItem prop="loginName" label="用户名">
            <i-input type="text" v-model="tableDataDetail.loginName" placeholder="username">
              <Icon type="ios-person-outline" slot="prepend"></Icon>
            </i-input>
          </FormItem>
          <FormItem prop="pwd" label="密码">
            <i-input type="password" v-model="tableDataDetail.pwd" placeholder="Password">
              <Icon type="ios-locked-outline" slot="prepend"></Icon>
            </i-input>
          </FormItem>
          <FormItem prop="mobile" label="电话">
            <i-input type="text" v-model="tableDataDetail.mobile" placeholder="mobile">
              <Icon type="android-phone-portrait" slot="prepend"></Icon>
            </i-input>
          </FormItem>
          <FormItem prop="mail" label="邮箱">
            <i-input type="text" v-model="tableDataDetail.mail" placeholder="email">
              <Icon type="ios-at" slot="prepend"></Icon>
            </i-input>
          </FormItem>
          <FormItem prop="realName" label="真实姓名">
            <i-input type="text" v-model="tableDataDetail.realName" placeholder="realName">
              <Icon type="ios-person-outline" slot="prepend"></Icon>
            </i-input>
          </FormItem>

          <FormItem style="float:right;margin-top:-3%;">
            <Button type="info" @click="editDriver(tableDataDetail)">确认修改</Button>
            <Button type="primary" @click="modal1 = false">取消</Button>
          </FormItem>
        </Form>
        <div slot="footer">
        </div>
      </Modal>
      <Modal
        v-model="modal2"
        title="添加司机">
        <Form ref="ruleForm2" :model="ruleForm" :rules="ruleFormValidate">

          <FormItem prop="truckId" label="车牌号">
            <Select v-model="ruleForm.truckId">
              <Option v-for="add in truckNoList" :value="add.id" :key="add.truck_no">{{add.truck_no}}</Option>
            </Select>
          </FormItem>
          <FormItem prop="loginName" label="用户名">
            <i-input type="text" v-model="ruleForm.loginName" placeholder="username">
              <Icon type="ios-person-outline" slot="prepend"></Icon>
            </i-input>
          </FormItem>
          <FormItem prop="pwd" label="密码">
            <i-input type="password" v-model="ruleForm.pwd" placeholder="Password">
              <Icon type="ios-locked-outline" slot="prepend"></Icon>
            </i-input>
          </FormItem>
          <FormItem prop="mobile" label="电话">
            <i-input type="text" v-model="ruleForm.mobile" placeholder="mobile">
              <Icon type="android-phone-portrait" slot="prepend"></Icon>
            </i-input>
          </FormItem>
          <FormItem prop="email" label="邮箱">
            <i-input type="text" v-model="ruleForm.email" placeholder="email">
              <Icon type="ios-at" slot="prepend"></Icon>
            </i-input>
          </FormItem>
          <FormItem prop="realName" label="真实姓名">
            <i-input type="text" v-model="ruleForm.realName" placeholder="realName">
              <Icon type="ios-person-outline" slot="prepend"></Icon>
            </i-input>
          </FormItem>

          <FormItem style="float:right;margin-top:-3%;">
            <Button type="info" @click="handleSubmit(ruleForm)">立即增加</Button>
            <Button type="primary" @click="modal2 = false">取消</Button>
          </FormItem>
        </Form>
        <div slot="footer">
        </div>
      </Modal>
    </div>
  </div>
</template>
<script>
  import {
    editTruck,
    getDriverListByPage,
    getDriverListByPageXHS,
    getTruckList,
    getTruckListXHS,
    addDriver,
    addDriverXHS,
    getDriverInfo,
    getDriverInfoXHS,
    editDriver,
    editDriverXHS,
    deleteDriver,
    deleteDriverXHS,
    getOwnFleet
  } from '@/api/backEnd/fleetControl'
  import tablePage from '@/components/table/tablePage.vue'
  import _ from 'lodash'

  export default {
    name: 'driverList',
    data () {
      let tabParam = {}
      let modal1 = false
      let modal2 = false
      let modalXHSFleet = false
      let modal1XHSEdit = false
      let indeterminate = true
      let driverList = []
      let fleetList = []
      let fleetPower = powerUtil.contains('xhsFleetPower') ? true : false
      let checkAll = false
      let a = 1
      let self = this
      let pageDefault = {
        pageIndex: 1,
        pageSize: 10
      }
      let columns7 = [
        {
          title: '序号',
          width: 100,
          render: (h, params) => {
            let thisIndex = params.row._index + 1
            if (this.pageDefault.pageIndex > 1) {
              thisIndex = thisIndex + (this.pageDefault.pageIndex - 1) * this.pageDefault.pageSize
            }
            return (<span>{thisIndex}</span>)
          }
        },
        // {
        //   title: '序号',
        //   key: 'id'
        // },
        {
          title: '用户名',
          key: 'loginName'
        },
        {
          title: '车牌号',
          key: 'truckNo'
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '8px'
                },
                on: {
                  click: (value, row) => {
                    this.modal1 = true
                    let id = params.row.id
                    this.DriverInfo(id)
                  }
                }
              }, '编辑'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.$Modal.confirm({
                      content: '确定解除绑定？',
                      onOk: () => {
                        let id = params.row.loginName
                        this.dataDelete(id)
                      }
                    })
                  }
                }
              }, '解绑')
            ])
          }
        }
      ]
      if (powerUtil.contains('xhsFleetPower')) {
        columns7 = [
          {
            title: '序号',
            width: 100,
            render: (h, params) => {
              let thisIndex = params.row._index + 1
              if (this.pageDefault.pageIndex > 1) {
                thisIndex = thisIndex + (this.pageDefault.pageIndex - 1) * this.pageDefault.pageSize
              }
              return (<span>{thisIndex}</span>)
            }
          },
          // {
          //   title: '序号',
          //   key: 'id'
          // },
          {
            title: '用户名',
            key: 'drivername'
          },
          {
            title: '车队',
            key: 'fleetname'
          },
          {
            title: '车牌号',
            key: 'truckno'
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '8px'
                  },
                  on: {
                    click: (value, row) => {
                      this.modal1XHSEdit = true
                      let id = params.row.driverid
                      let fleetId = params.row.fleetid
                      this.currentRowXHS = params.row
                      this.DriverInfoXHS(id, fleetId)
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        content: '确定解除绑定？',
                        onOk: () => {
                          let id = params.row.driverid
                          let fleetId = params.row.fleetid
                          this.dataDeleteXHS(id, fleetId)
                        }
                      })
                    }
                  }
                }, '解绑')
              ])
            }
          }
        ]
      }
      let tableData = {
        pagination: {
          total: 0,
          pageNo: 1,
          pageSize: 10,
          parentId: 0
        },
        rows: []
      }
      let tableDataDetail = {
        userId: '',
        loginName: '',
        truckId: '',
        truckNo: '',
        realName: '',
        mobile: '',
        mail: '',
        pwd: '',
        fleetId: ''
      }
      let tableDataDetailXHS = {
        truckid: '',
        fleetname: '',
        loginname: '',
        mobile: '',
        truckno: '',
        fleetid: '',
        userid: '',
        email: '',
        realname: ''
      }
      let ruleForm = {
        truckId: '',
        fleetId: '',
        loginName: '',
        mobile: '',
        email: '',
        pwd: '',
        realName: ''
      }
      let ruleFormValidate = {
        loginName: [
          {required: true, message: '请输入姓名', trigger: 'blur'},
          {pattern: /^[\u4e00-\u9fa5·]+$/, message: '姓名必须为汉字或·'},
          {type: 'string', min: 1, message: '姓名长度最小为1个字符'}
        ],
        pwd: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ],
        mobile: [
          {required: true, message: '请输入电话', trigger: 'blur'}
        ]
      }
      let truckNoList = []
      let cityList = []
      let currentRowXHS = []
      let datas = {
        pageDefault,
        modal1,
        modal2,
        indeterminate,
        checkAll,
        a,
        self,
        columns7,
        tableData,
        tableDataDetail,
        ruleForm,
        ruleFormValidate,
        truckNoList,
        cityList,
        tabParam,
        getDriverListByPage,
        modalXHSFleet,
        fleetPower,
        modal1XHSEdit,
        driverList,
        fleetList,
        tableDataDetailXHS,
        currentRowXHS
      }
      return datas
    },
    computed: {},
    methods: {
      pageChangeIndex (pageIndex, pageSize) {
        this.pageDefault.pageIndex = pageIndex
        this.pageDefault.pageSize = pageSize
      },
      getDriverListXHS () {
        getDriverListByPageXHS({}).then(res => {
          if (+res.data.isSuccess === 1) {
            this.driverList = res.data.data.rows
            this.pageDefault = {
              pageIndex: 1,
              pageSize: 10
            }
            this.$refs['containerTab'].dataRefresh()
          }
        })
      },
      getDriverList () {
        getDriverListByPage({}).then(res => {
          if (+res.data.isSuccess === 1) {
            this.driverList = res.data.data.rows
          }
        })
      },
      getAllFleetList () {
        getOwnFleet().then(res => {
          if (res.data.isSuccess === 1) {
            this.fleetList = res.data.data
          }
        })
      },
      truckList () {
        getTruckList({
          page: 1,
          pageSize: 1000
        }).then(res => {
          if (+res.data.isSuccess === 1) {
            this.truckNoList = res.data.data.list
          } else {
            console.log(res.data.res)
          }
        })
      },
      truckListXHS () {
        getTruckListXHS({
          page: 1,
          pageSize: 1000
        }).then(res => {
          if (+res.data.isSuccess === 1) {
            this.truckNoList = res.data.data
          } else {
            console.log(res.data.res)
          }
        })
      },
      handleSubmit (val) {
        this.$refs.ruleForm2.validate((valid) => {
          if (valid) {
            addDriver(val).then(res => {
              if (res.data.isSuccess === 1) {
                this.$Message.info('添加成功')
                this.pageDefault = {
                  pageIndex: 1,
                  pageSize: 10
                }
                this.$refs['containerTab'].dataRefresh()
                this.modal2 = false
              } else {
                this.$Message.info(res.data.res)
              }
            })
          } else {
            this.$Message.error('表单有错，无法提交')
          }
        })
      },
      handleSubmitXHS (val) {
        this.$refs.ruleForm1.validate((valid) => {
          if (valid) {
            addDriverXHS(val).then(res => {
              if (res.data.isSuccess === 1) {
                this.getDriverListXHS()
                this.$Message.info('添加成功')
                this.modalXHSFleet = false
              } else {
                this.$Message.info(res.data.res)
              }
            })
          } else {
            this.$Message.error('表单有错，无法提交')
          }
        })
      },
      editDriver (val) {
        if (!val.pwd) val.pwd = ''
        editDriver(val).then(res => {
          if (res.data.isSuccess === 1) {
            this.$Message.info('修改成功')
            this.pageDefault = {
              pageIndex: 1,
              pageSize: 10
            }
            this.$refs['containerTab'].dataRefresh()
            this.modal1 = false
          } else {
            this.$Message.info(res.data.res)
          }
        })
      },
      editDriverXHS (val) {
        let resSourceTruckTypeName = _.filter(this.truckNoList, (item) => {
          return item.id === this.tableDataDetailXHS.truckid
        })
        this.tableDataDetailXHS.truckno = resSourceTruckTypeName[0].truckNo
        if (!val.pwd) val.pwd = ''
        editDriverXHS(val).then(res => {
          if (res.data.isSuccess === 1) {
            this.currentRowXHS.fleetname = this.tableDataDetailXHS.fleetname
            this.currentRowXHS.fleetid = this.tableDataDetailXHS.fleetid
            this.currentRowXHS.driverid = this.tableDataDetailXHS.userid
            this.currentRowXHS.drivername = this.tableDataDetailXHS.loginname
            this.currentRowXHS.truckno = this.tableDataDetailXHS.truckno
            this.driverList[this.currentRowXHS._index] = this.currentRowXHS
            this.$Message.info('修改成功')
            this.pageDefault = {
              pageIndex: 1,
              pageSize: 10
            }
            this.$refs['containerTab'].dataRefresh()
            this.modal1XHSEdit = false
          } else {
            this.$Message.info(res.data.res)
          }
        })
      },
      remove (index) {
        this.data6.splice(index, 1)
      },
      DriverInfo (id) {
        getDriverInfo({
          driverId: id
        }).then(res => {
          if (res.data.isSuccess === 1) {
            this.tableDataDetail = res.data.data
            // this.tableDataDetail.truckId = res.data.data.truckId.toString();
          }
        })
      },
      DriverInfoXHS (id, fleetId) {
        getDriverInfoXHS({
          driverId: id,
          fleetId: fleetId
        }).then(res => {
          if (res.data.isSuccess === 1) {
            this.tableDataDetailXHS = res.data.data
            // this.tableDataDetail.truckId = res.data.data.truckId.toString();
          }
        })
      },
      ok () {
        editTruck({
          id: this.tableDataDetail.id,
          truckNo: this.tableDataDetail.truckNo,
          type: this.tableDataDetail.TYPE
        }).then(res => {
          if (res.data.isSuccess === 1) {
            this.$Message.info('修改成功')
            this.pageDefault = {
              pageIndex: 1,
              pageSize: 10
            }
            this.$refs['containerTab'].dataRefresh()
          } else {
            this.$Message.info(res.data.res)
          }
        })
      },
      okXHS () {
        editTruck({
          id: this.tableDataDetail.id,
          truckNo: this.tableDataDetail.truckNo,
          type: this.tableDataDetail.TYPE,
          fleetId: this.tableDataDetail.fleetId
        }).then(res => {
          if (+res.data.isSuccess === 1) {
            this.pageDefault = {
              pageIndex: 1,
              pageSize: 10
            }
            this.$refs['containerTab'].dataRefresh()
            this.$Message.info('修改成功')
          } else {
            this.$Message.info(res.data.res)
          }
        })
      },
      dataDelete (val) {
        deleteDriver({
          loginName: val
        }).then(res => {
          if (res.data.isSuccess === 1) {
            this.$Message.info('删除成功')
            this.pageDefault = {
              pageIndex: 1,
              pageSize: 10
            }
            this.$refs['containerTab'].dataRefresh()
          } else {
            this.$Message.info(res.data.res)
          }
        })
      },
      dataDeleteXHS (val, fleetId) {
        deleteDriverXHS({
          driverId: val,
          fleetId: fleetId
        }).then(res => {
          if (res.data.isSuccess === 1) {
            this.getDriverListXHS()
            this.$Message.info('删除成功')
          } else {
            this.$Message.info(res.data.res)
          }
        })
      },
      addDriver (val) {
        this.modal2 = true
      },
      addDriverXHSFleet (val) {
        this.modalXHSFleet = true
      }
    },
    mounted () {
      if (powerUtil.contains('xhsFleetPower')) {
        this.getAllFleetList()
        this.getDriverListXHS()
        this.truckListXHS()
      } else {
        this.getDriverList()
        this.truckList()
      }
    },
    components: {tablePage}
  }
</script>
<style scoped>

</style>
